<template>
  <div class="Home">
    <div class="HomeContent">
      <!-- 访问量 -->
      <div class="Content_head">
        <ul>
          <li>
            <i class="iconfont icon-yanjing-"></i>
            <p>今日访问量</p>
          </li>
          <li>
            <i class="iconfont icon-fire"></i>
            <p>本周访问量</p>
          </li>
          <li>
            <i class="iconfont icon-xingxing"></i>
            <p>本月访问量</p>
          </li>
          <li>
            <i class="iconfont icon-moonbyueliang"></i>
            <p>本年访问量</p>
          </li>
        </ul>
      </div>
      <!-- 柱状图 -->
      <div ref="chart" id="main"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const chart = ref();
onMounted(() => {
  init();
});
function init() {
  var myChart = echarts.init(chart.value);
  var option;

  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    legend: {
      data: ["销量", "库存", "访问量"],
    },
    xAxis: [
      {
        type: "category",
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "销量",
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: "{value} 个",
        },
      },
      {
        type: "value",
        name: "库存",
        min: 0,
        max: 1000,
        interval: 300,
        axisLabel: {
          formatter: "{value} 人",
        },
      },
    ],
    series: [
      {
        name: "销量",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value + " 个";
          },
        },
        data: [28, 46, 79, 22, 25, 767, 135, 162, 36, 20, 60, 36],
      },
      {
        name: "库存",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value + "个";
          },
        },
        data: [32, 52, 39, 236, 27, 70, 175, 182, 48, 18, 56, 25],
      },
      {
        name: "访问量",
        type: "line",
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + " 人";
          },
        },
        data: [52, 62, 35, 43, 65, 160, 230, 523, 231, 163, 192, 68],
      },
    ],
  };

  option && myChart.setOption(option);
}
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
}
li {
  list-style: none;
}
.Home {
  width: 100%;
  background-color: #fff;
  margin-top: 20px;
  margin-right: 20px;
  border-radius: 8px;
  .HomeContent {
    margin-top: 30px;
    width: 100%;
    .Content_head {
      > ul {
        display: flex;
        justify-content: space-evenly;
        > li {
          display: flex;
          justify-content: space-between;
          line-height: 50px;
          > i {
            width: 50px;
            height: 50px;
            font-size: 30px;
            color: white;
            background-color: #fe6d34;
            border-radius: 10px;
          }
          &:nth-of-type(2) > i {
            background-color: #2dc5f6;
          }
          &:nth-of-type(3) > i {
            background-color: #ffcf3d;
          }
          &:nth-of-type(4) > i {
            background-color: #b737fe;
          }
          > p {
            margin-left: 5px;
          }
        }
      }
    }

    #main {
      width: 100%;
      height: 450px;
      margin: 20px 0 10px;
    }
  }
}
</style>